<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style>
        .user-info-wrapper {
            padding: 16px;
        }

        .user-info-wrapper .info-wrapper {
            display: flex;
            height: 120px;
            align-content: center;
            margin-bottom: 10px;
            border-bottom: 3px double rgba(7, 17, 27, 0.4);
        }

        .user-info-wrapper .info-wrapper .avatar {
            flex: 150px 0 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

        }

        .user-info-wrapper .info-wrapper .avatar img {
            width: 80px;
            height: 80px;
            border-radius: 80px;
            box-sizing: border-box;
            border: 1px solid rgba(7, 17, 27, 0.3);
        }

        .user-info-wrapper .info-wrapper .info {
            display: flex;
            flex-direction: column;
        }

        .user-info-wrapper .info-wrapper .info .nickname {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: flex-start;
        }

        .user-info-wrapper .info-wrapper .info .username {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: flex-start;
        }

        .user-info-wrapper .info-wrapper .info .phone {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: flex-start;
        }

        .user-info-wrapper .email-wrapper,
        .user-info-wrapper .create-time-wrapper,
        .user-info-wrapper .addr-wrapper,
        .user-info-wrapper .birth-wrapper {
            height: 40px;
            display: flex;
            align-items: center;
            border-bottom: 1px solid rgba(7, 17, 27, 0.3);
        }

        .user-info-wrapper .email-wrapper .email-field,
        .user-info-wrapper .create-time-wrapper .time-field,
        .user-info-wrapper .addr-wrapper .addr-field,
        .user-info-wrapper .birth-wrapper .birth-field {
            flex: 150px 0 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
<div class="user-center">
    <div class="center-header">
        <div class="tree-nav">
            个人中心
        </div>
        <div class="info-nav">
            个人中心>个人信息
        </div>
    </div>
    <div class="center-body">
        <div class="body-tree">
            <ul class="tree-list">
                <li class="user-info active">
                    <a href="/user/toInfo">个人信息</a>
                </li>
                <li class="user-email">
                    <a href="/user/toEmail">绑定邮箱</a>
                </li>
                <li class="user-password">
                    <a href="/user/toPassword">修改密码</a>
                </li>
                <li class="user-set">
                    <a href="">个人设置</a>
                </li>
            </ul>
        </div>
        <div class="body-content">
            <div class="user-info-wrapper">
                <%--用户昵称、头像、电话、邮箱、真实姓名、生日、加入时间、地址--%>
                <div class="info-wrapper">
                    <div class="avatar">
                        <img src="${userInfo.avatar}" id="avatar-img" alt="">
                        <a class="layui-btn" id="avatar-upload">修改头像</a>
                    </div>
                    <div class="info">
                        <p class="nickname">${userInfo.nickname}</p>
                        <p class="phone">${userInfo.phone}</p>
                        <p class="username">${userInfo.name}</p>
                    </div>
                </div>
                <div class="email-wrapper">
                    <div class="email-field">注册邮箱</div>
                    <div class="email">${userInfo.email}</div>
                </div>
                <div class="birth-wrapper">
                    <div class="birth-field">用户生日</div>
                    <div class="birth">${userInfo.birth}</div>
                </div>
                <div class="create-time-wrapper">
                    <div class="time-field">加入时间</div>
                    <div class="time">${userInfo.createTime}</div>
                </div>
                <div class="addr-wrapper">
                    <div class="addr-field">联系地址</div>
                    <div class="addr">${userInfo.addr}</div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/static/layui/layui.all.js"></script>
<script src="/static/jQuery/jquery-2.1.1.js"></script>
<script>
    let upload = layui.upload;
    let uploadInst = upload.render({
        elem: '#avatar-upload',
        url: '/upload/avatar', //改成您自己的上传接口
        done: function (resp) {
            // 修改img的src
            $("#avatar-img").attr('src', resp.src)
        }
    })
</script>
</body>
</html>
